/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="trend__wrap">
        <div class="user-resource-gpu__top-right">
            <sf-radio-group v-show="selectType === GPU_VALUE" v-model="radioType" class="user-resource-gpu__radio m-r30 m-t5" :is-space-group="true">
                <sf-radio-button v-for="item in gpuOpts" :key="item.value" :check-value="item.value">{{ item.label }}
                </sf-radio-button>
            </sf-radio-group>
            <sf-select v-model="selectType"
                       :default-width="120"
                       :options="typeOpts"
                       :allow-blank="false"></sf-select>

            <sf-select v-model="time"
                       :default-width="100"
                       :options="timeOpts"
                       :allow-blank="false"></sf-select>
        </div>
        <div class="line-charts-wrap" :style="lineStyle">
            <line-charts ref="lineCharts"
                         use="user"
                         :type="type"
                         :time="time"
                         :for-mat="forMat"
                         :grid-position="{left: 65, right: 65, bottom: 20}"
                         :x-show="xShow"
                         area-color="#edf3fb"
                         line-color="#4d8dd9"/>
        </div>
    </div>
</template>
<style lang="less" scoped>
.trend__wrap {
    width: 100%;
    height: 100%;

    .user-resource-gpu__top-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-right: 20px;

        .sfv-select {
            margin: 5px 5px 0 0;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .line-charts-wrap {
        height: calc(100% - 40px);
    }
}
</style>

<script>
import LineCharts from 'src/home/mod_cluster/common/chart/line_chart.vue';
import {GPU_VALUE, TYPE_OPTIONS_USER, TIME_WEEK, TIME_OPTIONS_USER, TYPE_OPTION_GPU, SUANLI_VALUE} from '../const';

export default {
    components: {
        LineCharts
    },
    props: {
        typeProp: {
            type: String
        },
        timeProp: {
            type: String
        }
    },
    data() {
        return {
            forMat: 'm-d',
            xShow: true,
            lineWidht: 0,
            lineHeight: 0,
            radioType: SUANLI_VALUE,
            selectType: GPU_VALUE,
            time: TIME_WEEK,
            typeOpts: TYPE_OPTIONS_USER,
            timeOpts: TIME_OPTIONS_USER,
            gpuOpts: TYPE_OPTION_GPU,
        };
    },

    watch: {

        typeProp() {
            if (this.typeProp) {
                this.type = this.typeProp
            }
        },
        timeProp() {
            if (this.timeProp) {
                this.time = this.timeProp
            }
        },
        lineWidht() {
            this.$nextTick().then(() => {
                this.$refs.lineCharts.lineResize();
            });
        }
    },

    computed: {
        GPU_VALUE() {
            return GPU_VALUE
        },

        type() {
          if(this.selectType === GPU_VALUE) {
              return this.radioType;
          } else {
              this.radioType = SUANLI_VALUE;
              return this.selectType;
          }
        },
        lineStyle() {
            let style = {};
            style.width = `${this.lineWidht ? this.lineWidht : ''}px`;
            style.height = `${this.lineHeight ? this.lineHeight : ''}px`;
            return style
        }
    },

    methods: {}

};
</script>


